<template>
	<view class="container">
		<view class="v-menu-container">
			<view class="v-menu-item" v-for="(item, index) in datas.Menus" @click="nav(item)">
				<image :src="item.ImageSrc" mode="aspectFit"></image>
				<view class="v-menu-item-title" style="flex: 1">
					{{ item.Title }}
				</view>
				<view class="v-menu-item-content">
					<view class="v-menu-item-content-text" v-if="item.TextContent">{{ item.TextContent }}</view>
					<image :src="item.ImageContent" class="v-menu-item-content-image" v-if="item.ImageContent"></image>
				</view>
				<image src="../../static/icon-jkh.png" mode="aspectFit" style="justify-self: flex-end; height: 30rpx; width: 30rpx"></image>
			</view>
		</view>
		<view class="v-op">
			<view class="v-op-logout" @click="logout">退出登录</view>
		</view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
export default {
	data() {
		return {
			datas: {
				ProtocalCms: {
					UserProtocal: null,
					BuyProtocal: null
				},
				Menus: [
					{
						Id: 1,
						ImageSrc: '../../static/icon-order.png',
						Title: '头像'
					},
					{
						Id: 2,
						ImageSrc: '../../static/icon-product.png',
						Title: '昵称'
					},
					{
						Id: 3,
						ImageSrc: '../../static/icon-card.png',
						Title: '密码修改'
					},
					{
						Id: 4,
						ImageSrc: '../../static/icon-invite.png',
						Title: '用户协议'
					},
					{
						Id: 5,
						ImageSrc: '../../static/icon-pos.png',
						Title: '购买及委托代卖协议'
					}
				]
			}
		};
	},
	methods: {
		loadProtocalCmsInfo: function () {
			let _this = this;

			//正式代码
			var authToken = authTokenUtil();
			var queryData = {
			};
			uni.request({
				url: _this.sysInfo.BasePath + 'Sys/GetProtocalCmsInfo',
				method: 'POST',
				data: queryData,
				header: {
					'content-type': 'application/json',
					Authorization: `${authToken}`
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						console.log(res);
						_this.datas.ProtocalCms.UserProtocal = res.data.Data.UserProtocal;
						_this.datas.ProtocalCms.BuyProtocal = res.data.Data.BuyProtocal;
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '加载协议信息失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '加载协议信息失败！',
						icon: 'error'
					});
				},
				complete: () => {}
			});
		},
		getServerPath: function(url) {
			let _this = this;
			console.log(`${_this.sysInfo.ImageBasePath}${url}`);
			return `${_this.sysInfo.ImageBasePath}${url}`;
		},
		nav: function (item) {
			let _this = this;
			switch (item.Id) {
				case 1:
					uni.navigateTo({
						url: '/pages/sys/setting-icon'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/sys/setting-nick'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/sys/setting-pwd'
					});
					break;
				case 4:
					uni.setStorage({
						key: 'CurrentCms',
						data: _this.datas.ProtocalCms.UserProtocal,
						success: function () {
							uni.navigateTo({
								url: '/pages/index/cms-content'
							});
						}
					});

					break;
				case 5:
					uni.setStorage({
						key: 'CurrentCms',
						data: _this.datas.ProtocalCms.BuyProtocal,
						success: function () {
							uni.navigateTo({
								url: '/pages/index/cms-content'
							});
						}
					});

					break;
				default:
					break;
			}
		},
		logout: function () {
			this.dialogMsg = `确定要退出吗？`;
			this.$refs.alertDialog.open();
		},
		dialogConfirm() {
			console.log('点击确认');
			//删除标准参数
			uni.removeStorage({
				key: 'CurrentUser'
			});
			uni.removeStorage({
				key: 'RemeberUser'
			});
			uni.reLaunch({
				url: '../account/login'
			});
			console.log('logout');
		},
		dialogClose() {
			console.log('点击关闭');
		},
		init: function () {
			let _this = this;
			console.log('init');

			uni.getStorage({
				key: 'CurrentUser',
				success: (res) => {
					if (res) {
						console.log(res,100000);
						_this.datas.Menus[0].ImageContent = _this.getServerPath(res.data.Icon) ? _this.getServerPath(res.data.Icon) : '../../static/logo.png';
						_this.datas.Menus[1].TextContent = res.data.NickName || '知念';
					}
				},
				fail: (error) => {
					console.log(error);
				}
			});
			_this.loadProtocalCmsInfo();
		}
	},
	onShow() {
		let _this = this;
		 _this.init();
	},
	created() {
		let _this = this;
		validLoginToken(null, () => {
			uni.reLaunch({
				url: "/pages/account/login"
			})
		})
		// _this.init();
	}
};
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	background-color: #fff;
	position: fixed;
	height: 100%;
	width: 100%;
}

.v-menu-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: 20rpx;
}

.v-menu-item {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	height: 120rpx;
	font-size: 26rpx;
	cursor: pointer;
	border-bottom: solid 1px #f0f0f0;
}

.v-menu-item image {
	height: 35rpx;
	width: 35rpx;
	margin-right: 20rpx;
}

.v-menu-item-content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	margin-right: 20rpx;
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
}

.v-menu-item-content image {
	height: 80rpx;
	width: 80rpx;
	border-radius: 50rpx;
	margin-right: 0;
}

.v-op {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 100rpx;
}

.v-op-logout {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #c93a00ff;
	height: 70rpx;
	width: 350rpx;
	font-size: 32rpx;
	color: #fff;
	border-radius: 50rpx;
}
</style>
